@use '@/styles/vars';
.zhanghucontainer{
  padding-top:88px;
  p,h3{
    margin:0;
  }
  .topbanner{
    width:100%;
    display:flex;
    flex-direction: column;
    background-image:url('./images/topng.png');
    background-repeat: no-repeat;
    background-size: cover;
    padding-top:75px;
    padding-bottom:68px;
    div{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width:375 * vars.$px;
      margin:0 auto;

      h3{
        font-weight: 900;
        font-size: 40px;
        color: #FFFFFF;
        line-height:41px;
        font-style: normal;
        text-transform: none;
        margin-bottom:62px;
      }

      p{
        font-weight: 400;
        font-size: 14px;
        color: #FFFFFF;
        text-align: center;
        font-style: normal;
        text-transform: none;
        line-height:20px;
      }
    }
  }

  .waihuibox{
    background-color:#fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top:73px;
    padding-bottom:120px;
    .waihuiboxtitlebox{
      width:375 * vars.$px;
      margin:0 auto;
    }
    h3{
      font-weight: 900;
      font-size: 40px;
      color: #E24737;
      text-align: center;
      font-style: normal;
      text-transform: none;
      margin:0;
    }

    .hengxian{
      display: inline-block;
      width: 46px;
      height: 2px;
      background: #E24737;
      margin:30px 0;
    }

    .gangganbox{
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 0 100px;

      >div{
        width: 436px;
        height: 250px;
        background: #FFFFFF;
        border: 1px solid #E24737;
        // border-radius: 268px / 144px;
        border-radius:20px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;

        p:nth-child(1){
          font-weight: 900;
          font-size: 60px;
          line-height: 70px;
          color: #E24737;
          text-align:center;
          font-style: normal;
          text-transform: none;
          padding-top:68px;
        }

        p:nth-child(2){
          font-weight: 400;
          font-size: 14px;
          color: #999999;
          font-style: normal;
          text-transform: none;
          padding-top:20px;
        }
      }
    }

    .waihuiboxtitle{
      font-weight: 900;
      font-size: 40px;
      color: #E24737;
      text-align: center;
      font-style: normal;
      text-transform: none;
      margin-top:47px;
    }

    .waihuiboxdesc{
      font-weight: 400;
      font-size: 14px;
      color: #999999;
      text-align: center;
      font-style: normal;
      text-transform: none;
      margin-top:28px;
    }
  }

  .tablebox{
    background-color:#fff;
    width:375 * vars.$px;
    margin:0 auto;
    margin-top:60px;
    box-shadow: 0px 0px 43px 0px #f2f2f2;
    border-radius:22px;
    padding-top:20px;
    table{
      width:100%;

      img{
        width:54px;
        height:54px;
      }

      td{
        height:100px;
        text-align: center;
        font-weight: 400;
        font-size: 24px;
        color: #666666;
        line-height: 24px;
        font-style: normal;
        text-transform: none;
        div{
          display: flex;
          flex-direction: row;
          align-items: center;
          padding-left:50px;

          span{
            margin-left:30px;
            font-weight: 400;
            font-size: 24px;
            color: #000000;
            line-height: 24px;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }
        }
      }
      th{
        font-weight: 400;
        font-size: 16px;
        color: #666666;
        line-height: 40px;
        font-style: normal;
        text-transform: none;
        text-align: center;
      }
      button{
        width: 136px;
        height: 32px;
        background: #FFFFFF;
        border: 1px solid #95724D;
        font-weight: 400;
        font-size: 16px;
        color: #95724D;
        line-height: 24px;
        text-align:center;
        font-style: normal;
        text-transform: none;
        cursor: pointer;
      }
      tr{
        td:nth-child(5){
          text-align: right;
          padding-right:50px;
        }
      }

      tbody{
        tr:nth-child(odd){
          td{
            color:#1BAF2C;
          }
        }
        tr:nth-child(even){
          td{
            color:#B31E1E;
          }
        }
      }
    }
  }

  .gupiaozhishubox{
    background-color:#F5EBEB;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top:73px;
    padding-bottom:120px;
    h3{
      font-weight: 900;
      font-size: 40px;
      color: #E24737;
      text-align: center;
      font-style: normal;
      text-transform: none;
      margin:0;
    }

    .hengxian{
      display: inline-block;
      width: 46px;
      height: 2px;
      background: #E24737;
      margin:30px 0;
    }

    .waihuiboxtitle{
      font-weight: 900;
      font-size: 40px;
      color: #E24737;
      text-align: center;
      font-style: normal;
      text-transform: none;
      margin-top:47px;
    }

    .waihuiboxdesc{
      font-weight: 400;
      font-size: 14px;
      color: #999999;
      text-align: center;
      font-style: normal;
      text-transform: none;
      margin-top:28px;
    }

    .gupiaozhishutypebox{
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap:0 45px;
      >div{
        width:435px;
        height:235px;
        text-align: center;
        font-weight: 400;
        font-size: 14px;
        color: #999999;
        font-style: normal;
        text-transform: none;

        p{
          margin-top:179px;
        }
      }
      >div:nth-child(1){
        background-image:url('./images/9.png');
        background-repeat: no-repeat;
        background-size: 100%;
      }
      >div:nth-child(2){
        background-image:url('./images/11.png');
        background-repeat: no-repeat;
        background-size: 100%;
      }
      >div:nth-child(3){
        background-image:url('./images/10.png');
        background-repeat: no-repeat;
        background-size: 100%;
      }
    }

    .zhengquantypebox{
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap:0 40px;

      >div{
        width:342px;
        height:185px;
        text-align: center;
        font-weight: 400;
        font-size: 14px;
        color: #999999;
        font-style: normal;
        text-transform: none;

        p{
          margin-top:140px;
        }
      }
      >div:nth-child(1){
        background-image:url('./images/gp1@2x.png');
        background-repeat: no-repeat;
        background-size: 100%;
      }
      >div:nth-child(2){
        background-image:url('./images/gp2@2x.png');
        background-repeat: no-repeat;
        background-size: 100%;
      }
      >div:nth-child(3){
        background-image:url('./images/gp3@2x.png');
        background-repeat: no-repeat;
        background-size: 100%;
      }
      >div:nth-child(4){
        background-image:url('./images/gp4@2x.png');
        background-repeat: no-repeat;
        background-size: 100%;
      }
    }
  }
}